<template>
  <!-- 群聊弹窗 -->
  <el-dialog :visible.sync="showDialog" width="900px" @close="closeDialog" :close-on-click-modal="false">
    <div class="wxChat">
      <div class="dialog-chat-left">
        <div class="search-wrapper top-wrapper">
          <span>群名称：</span>
          <el-input class="padding" placeholder="输入群名称" size="mini" v-model="keyword"/>
          <el-button size="mini" type="primary" @click="searchChat">搜 索</el-button>
        </div>
        <div style="height: calc(100% - 40px)">
          <el-table ref="selectChatTab" :data="chats" style="width: 100%" height="100%"
                    :header-cell-class-name="leftHeaderStyle"
                    @row-click="tabRowClick"
                    v-loadmore="loadMoreData"
                    @selection-change="selectChat">
            <el-table-column width="50" type="selection"/>
            <el-table-column label="群名称" prop="name"/>
            <el-table-column width="60" label="群人数" prop="total"/>
            <el-table-column label="群主" prop="owner"/>
          </el-table>
        </div>
      </div>

      <div class="dialog-chat-right">
        <div class="text-center top-wrapper">
          <span>已选择群</span>
          <span class="al-tips-text-org" v-if="maxChat>0">最多可选{{ maxChat }}个群</span>
        </div>
        <div style="height:calc(100% - 40px)">
          <el-table :data="choiceChat" style="width: 100%" height="100%">
            <el-table-column width="50">
              <template slot-scope="{$index}">{{ $index + 1 }}</template>
            </el-table-column>
            <el-table-column label="群名称" prop="name"/>
            <el-table-column width="60" label="群人数" prop="total"/>
            <el-table-column label="群主" prop="owner"/>
            <el-table-column label="操作">
              <template slot-scope="{row,$index}">
                <wx-link @click.native="removeChat(row)">删除</wx-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {dialogChat} from "@/api/wxqy/wxTestData";
import WxLink from "@/components/wxqy/wxLink/wxLink";
import {timeOut} from "@/utils/time";

export default {
  name: "wxChat",
  components: {WxLink},
  directives: {
    loadmore: {
      bind(el, bind) {
        const body = el.querySelector('.el-table__body-wrapper')
        body.addEventListener('scroll', (e) => {
          const tag = e.currentTarget
          const scroll = tag.scrollHeight - tag.scrollTop
          if (scroll === tag.clientHeight) {
            // this.loadMoreData()
            bind.value()
          }
        })
      }
    }
  },
  props: {
    show: false,
    maxChat: {
      default: 5
    },
    currentChats: {
      type: Array,
      default: []
    }
  },
  watch: {
    show: function (v) {
      this.showDialog = v
    },
    currentChats: function (chats) {
      timeOut(() => {
        let ids = chats.filter(c => c.id).map(c => c.id)
        for (const chat of this.chats) {
          if (ids.includes(chat.id)) {
            this.tabRowClick(chat)
          }
        }
      })
    }
  },
  data() {
    return {
      showDialog: this.show,
      keyword: null,
      chats: [],
      choiceChat: this.currentChats || [],
      overflowMonitor: null,
      loadMore: false,
      page: 1
    }
  },
  methods: {
    init() {
      this.chats = dialogChat
      // this.loadMoreData()
    },
    loadMoreData() {
      if (!this.loadMore) {
        this.loadMore = true
        timeOut(() => this.loadMore = false)
      }
    },
    searchChat() {

    },
    leftHeaderStyle({column, columnIndex,}) {
      if (columnIndex === 0) {
        return 'hidden-all-box'
      }
    },
    closeDialog() {
      this.showDialog = false
      this.$emit('update:show', false)
      this.tabRowClick()
    },
    sure() {
      this.$emit('sure', this.choiceChat)
      this.closeDialog()
    },
    removeChat(row) {
      for (const c of this.chats) {
        if (c.id === row.id) {
          this.tabRowClick(c)
          break
        }
      }
    },
    selectChat(rows) {
      if (this.maxChat) {
        let addList = []
        for (let i = 0; i < rows.length; i++) {
          if (i < this.maxChat) {
            addList.push(rows[i])
          } else {
            this.tabRowClick(rows[i])
          }
        }
        this.choiceChat = addList
      } else {
        this.choiceChat = rows
      }
    },
    tabRowClick(row) {
      if (row) {
        this.$refs.selectChatTab.toggleRowSelection(row)
      } else {
        this.$refs.selectChatTab.clearSelection()
      }
    }
  },
  created() {
    this.init()
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/styles/common";

.wxChat {
  @include flex-start;
  align-items: flex-start;
  height: 60vh;

  .dialog-chat-left {
    width: 49%;
    border-right: 1px solid rgba(0, 0, 0, .1);
    padding-right: 4px;
    height: 100%;

    .search-wrapper {
      @include flex-start;

      span {
        width: 100px;
      }

      .padding {
        padding-right: 10px;
      }
    }
  }

  .top-wrapper {
    margin-bottom: 4px;
    height: 40px;
  }

  .dialog-chat-right {
    width: 49%;
    margin-left: 10px;
    height: 100%;
  }

  ::v-deep .hidden-all-box .cell {
    visibility: hidden;
  }
}

</style>
